<template>
  <div class="BhfbTree BhfbTree-wrap">
    <!-- 此页面病患树 -->
    <div class="autocomplete-wrap" v-if="isShowSearch">
      <el-input v-model="filterText" clearable>
<!--        <template slot="prepend">全部 |</template>-->
        <el-button slot="append" type="text" icon="el-icon-search" @click.stop="watchFilterText(filterText)"></el-button>
      </el-input>
    </div>
    <div class="layer-tree"  v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.2)">
      <!-- <el-scrollbar :style="{height: isShowSearch ? 'calc(100% - 50px)' : '100%'}"
                    v-if="!loading"
                    class="cmp-scrollbar-y"> -->
        <transition name="fade" >
          <el-tree
            v-if="!loading"
            ref="tree"
            :data="data"
            node-key="code"
            :auto-expand-parent="true"
            :props="defaultProps"
            :default-expanded-keys="defExpKeys"
            @node-click="nodeClick"
            :filter-node-method="filterNode"
          >
          <span class="span-ellipsis" slot-scope="{ node, data }">
		      <span class="el-tree-node__label" :title="node.label">{{ node.label }}</span>
	      </span>
          </el-tree>
        </transition>
      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';
import { bhfbServer } from '@/api/installServer';
import publishObjectPath from '@/util/configRegistry';
const districtCode = publishObjectPath.value.districtCode;

@Component({
  name: 'AreaTree',
  components: {}
})
export default class AreaTree extends Vue {
  @Prop() private isShowSearch: any;
  private filterText: any = '';
  private defExpKeys: any = [];
  private loading: any = true;
  private defaultProps: any = {
    children: 'children',
    label: 'name',
    id: 'code'
  };
  private data: any = [
    // {
    //   code: '420100',
    //   name: '武汉市',
    //   parentId: '420000',
    //   level: '2',
    //   location: {
    //     lng: '114.2919', // 经度
    //     lat: '30.5675' // 纬度
    //   },
    //   children: [
    //     {
    //       code: '420102',
    //       name: '温馨苑1Ｂ（Ｂ区）',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.2954', // 经度
    //         lat: '30.5897' // 纬度
    //       }
    //     },
    //     {
    //       code: '420103',
    //       name: '温馨苑B（B区）',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.2838', // 经度
    //         lat: '30.5711' // 纬度
    //       }
    //     },
    //     {
    //       code: '420104',
    //       name: '硚口区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.2642', // 经度
    //         lat: '30.5698' // 纬度
    //       }
    //     },
    //     {
    //       code: '420105',
    //       name: '汉阳区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.2689', // 经度
    //         lat: '30.5522' // 纬度
    //       }
    //     },
    //     {
    //       code: '420106',
    //       name: '武昌区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.2926', // 经度
    //         lat: '30.5508' // 纬度
    //       }
    //     },
    //     {
    //       code: '420111',
    //       name: '洪山区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.3565', // 经度
    //         lat: '30.5214' // 纬度
    //       }
    //     },
    //     {
    //       code: '420107',
    //       name: '青山区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.3889', // 经度
    //         lat: '30.6402' // 纬度
    //       }
    //     },
    //     {
    //       code: '420112',
    //       name: '东西湖区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.1468', // 经度
    //         lat: '30.6283' // 纬度
    //       }
    //     },
    //     {
    //       code: '420114',
    //       name: '蔡甸区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.0249', // 经度
    //         lat: '30.5856' // 纬度
    //       }
    //     },
    //     {
    //       code: '420115',
    //       name: '江夏区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.3083', // 经度
    //         lat: '30.3532' // 纬度
    //       }
    //     },
    //     {
    //       code: '420116',
    //       name: '黄陂区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.3719', // 经度
    //         lat: '30.8717' // 纬度
    //       }
    //     },
    //     {
    //       code: '420117',
    //       name: '新洲区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.7943', // 经度
    //         lat: '30.8503' // 纬度
    //       }
    //     },
    //     {
    //       code: '420113',
    //       name: '汉南区',
    //       parentId: '420100',
    //       level: '3',
    //       location: {
    //         lng: '114.0776', // 经度
    //         lat: '30.3123' // 纬度
    //       }
    //     }
    //   ]
    // }
  ];

  @Emit('nodeClick')
  private nodeClick(data: any, checked: any, indeterminate: any) {
    const that = this;
  }
  @Watch('filterText')
  private watchFilterText(val: any) {

   // const str:string = this.ToDBC(val);
    (this.$refs as any).tree.filter(val);
  }

  private filterNode(value: any, data: any) {
    if (!value) return true;

    return data.name.indexOf(value) !== -1;
  }

  // 转换全角的方法，未使用 让后台数据转换了
  private ToDBC(str:any ){
    var result = '';
    for(var i=0; i < str.length; i++){
    const code = str.charCodeAt(i);
      if(code >= 33 && code <= 126){
        result += String.fromCharCode(str.charCodeAt(i) + 65248);
      }else if (code == 32){
        result += String.fromCharCode(str.charCodeAt(i) + 12288 - 32);
      }else{
        result += str.charAt(i);
      }
    }
    return result;
  }
  private created() {
    // 接口存在问题注释
    this.initData();
  }

  private initData() {
    let params: any = {
      districtCode: districtCode // 武汉市code
    };
    this.defExpKeys = [districtCode];
    bhfbServer.getAreaData(params).then((res: any) => {
      this.loading = false;
      if (res.status === 200 && res.data.code === 0) {
        this.data = res.data.data;
        console.log(111,this.data);
        return;
      }
      this.data = [];
    });
  }
}
</script>
<style lang="less" scoped>
.BhfbTree {
  height: 100%;
}
.layer-tree {
  // background: #031739;
  font-family: 'Microsoft YaHei';
  height: 100%;
  overflow-y:auto ;
  user-select: none;
  &::-webkit-scrollbar {/*滚动条整体样式*/
        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

  &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        //  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(144,147,153,.5);
    }

  &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.1);
        border-radius: 10px;
        background: transparent;
}

  .el-tree {
    background: transparent;
    padding-top: 10px;
    color: #fff;
    height: 100%;
    box-sizing: border-box;

  }
}
</style>
<style lang="less">
@gisBgColor: #031739;
@gisTxtcolor: red;
/* 搜索框样式 start*/
.autocomplete-wrap .el-input .el-input__clear{
  font-size: 22px;
}
  /* 搜索框样式 end*/
/* 滚动条样式 start*/
.cmp-scrollbar-y .el-scrollbar__wrap {
  overflow-x: hidden;
  .el-scrollbar__view {
    height: 100%;
  }
}
/* 滚动条样式 end*/
.layer-tree {
  .span-ellipsis {
    display: block;
    width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .el-scrollbar__view {
    height: 100%;
  }
  .el-tree-node {
    background-color: transparent;
    .el-tree-node__content {
      background-color: transparent !important;
      height: 42px;
      line-height: 42px;
      &:link,
      &:hover,
      &:active,
      &:visited {
        background-color: transparent !important;
        user-select: none;
      }
      .el-tree-node__label {
        height: 18px;
        line-height: 18px;
        font-size: 18px;
        letter-spacing: 1px;
        color: #c2e7f2;
        // color: #ffe92c;
      }
    }
    .el-tree-node__children {
      .el-tree-node__content {
        .is-leaf {
          color: #c2e7f2;
          &::before {
            content: '';
            width: 10px;
            height: 10px;
            background-color: #16e5f6;
            border-radius: 10px;
            display: inline-block;
            margin-right: 15px;
            position: relative;
            top: 1px;
          }
        }
      }
      .el-tree-node {
        &.is-current {
          background-color: transparent;
          .el-tree-node__content {
            background-color: transparent !important;
            box-shadow: inset 0px 0px 8px 2px rgba(0, 227, 255, 0.7),
              0 0 7px 0 rgba(0, 255, 255, 0.5);
            border-radius: 3px;
            opacity: 0.8;
            .el-tree-node__label {
              color: #ffe92c;
            }
            & + [role='group'] {
              .el-tree-node__content {
                box-shadow: none;
                .el-tree-node__label {
                  color: #c2e7f2;
                  &:after {
                    display: none;
                  }
                }
              }
            }
            .el-tree-node__label {
              &::after {
                content: '';
                width: 23px;
                height: 26px;
                background-color: #16e5f6;
                display: inline-block;
                position: absolute;
                right: 15px;
                margin-top: 8px;
                background: url('../../assets/img/tree/localhost.png') no-repeat
                  0 0;
                background-size: 100% 100%;
              }
            }
          }
        }
      }
    }
    .el-icon-caret-right:before {
      content: '\e6e1';
    }
  }
}
</style>
